import React, { Component } from 'react'
import { NavLink, Route, Redirect, Switch } from 'react-router-dom'
import { connect } from 'react-redux'
import Homes from './home/Homes'
import Classify from './home/Classify'
import Car from './home/Car'
import My from './home/My'

class Home extends Component {
    state = {
        footerList: [
            {
                title: "首页",
                path: "/home/homes",
                com: Homes
            },
            {
                title: "分类",
                path: "/home/classify",
                com: Classify
            },
            {
                title: "购物车",
                path: "/home/car",
                com: Car
            },
            {
                title: "我的",
                path: "/home/my",
                com: My
            }
        ]
    }
    render() {
        const { footerList } = this.state
        const { allCount } = this.props
        return (
            <div className="home">
                <header>1</header>
                <main>
                    <Switch>
                        {
                            footerList.map((item, index) => {
                                return <Route key = { index } path = { item.path } component = { item.com }/>
                            })
                        }
                        <Redirect to = "/home/homes"/>
                    </Switch>
                </main>
                <footer>
                    {
                        footerList.map((item, index) => {
                            return <NavLink key = { index } to = { item.path }>
                                { item.title } 
                                { item.path === "/home/car" && allCount > 0 ? <span className="span">{ allCount }</span> : "" }
                            </NavLink>
                        })
                    }
                </footer>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    const { allCount } = state
    return {
        allCount
    }
}

export default connect(mapStateToProps)(Home)
